<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>通过HTML及CSS模拟报纸排版</title>
		<link rel="stylesheet" type="text/css" href="./task1-6.css">
	</head>
	<body>
		<div class="header">
			<div class="header-link">
				<a href="http://ife.baidu.com" target="_blank">ife.baidu.com</a>
			</div>
			<time class="header-time">2016.03</time>
			<hr class="header-line">
		</div>
		<div class="page-top clearfix">
			<div class="image">
				<img src="img/task_1_06_1.png" alt="" class="image1">
				<div class="front-green-box"></div>
				<div class="front-red-box"></div>
			</div>
			<div class="about">
				<hr class="about-line">
				<p class="about-upper">About</p>
				<p class="about-upper">Technologe</p>
				<p class="about-lower">About technologe about technologe about technologe</p>
				<p class="about-700">700</p>
				<span class="about-32">3.2</span>
				<span class="about-css">css</span>
				<span class="about-csss">cscsccsscscscsc</span>
			</div>
			<div class="wh">
				<div class="wh-what">
					<a href="" target="_blank" class="what">What</a>
					<p class="saying">积分剪短发了回复二级分类及可能就会对</p>
				</div>
				<div class="wh-when">
					<a href="" target="_blank" class="when">When</a>
					<p class="saying">积分剪短发了回复二级分类及可能就会对</p>
				</div>
				<div class="wh-how">
					<a href="" target="_blank" class="how">How</a>
					<p class="saying">积分剪短发了回复二级分类及可能就会对</p>
					<p class="saying">前端前端前端前端前端前端前端前端</p><br><br>
					<p class="three-what">What-----------<span class="wh-percent">40%</span></p>
					<p class="three-what">When-----------<span class="wh-percent">30%</span></p>
					<p class="three-what">How------------<span class="wh-percent">30%</span></p>
				</div>
			</div>
		</div>
		<div class="page-buttom clearfix">
			<div class="article">
				<h2 class="page-title"><span class="page-title-front">THE</span> TECHNOLOGE OF FRONT</h2>
				<h3 class="page-subtitle">前端技术领域</h3>
				<hr class="article-line">
				<p class="hood">前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前</p>
				<p class="hood-none">前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前</p>
				<p class="hood-none">前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前</p>
				<img src="img/task_1_06_4.png" alt="" class="image4">
			</div>
			<div class="right-bottom-img">
				<img src="img/task_1_06_5.png" alt="" class="image5">
				<div class="img-tips"></div>
				<p class="img-text">前端技术<span class="img-subtext">前端技术领域前端</span></p>
			</div>
			<div class="right-bottom-text">
				<div class="rb-texts">
					<img src="img/task_1_06_6.png" alt="" class="image6">
					<p><span class="rb-text">前端前端...........</span><span class="rb-author">前端</span></p>
					<p><span class="rb-text">前端前端...........</span><span class="rb-author">前端</span></p>
					<p><span class="rb-text">前端前端...........</span><span class="rb-author">前端</span></p>
				</div>
				<p class="rb-sayhello"><span class="quotation-mark"></span>hello world hello world hello world hello world</p>
				<div class="rb-red-box">
					<p class="rb-zero">0</p>
					<p class="rb-count">ONE TWO</p>
					<p class="rb-count">THREE FORE FIVE</p>
					<p class="rb-hw">hello world hello world hello world hello world hello</p>
				</div>
			</div>
		</div>

		<div class="footer">
			<hr class="footer-line">
			<div class="footer-link">
				<a href="http://ife.baidu.com" target="_blank">ife.baidu.com</a>
			</div>
		</div>
	</body>
</html>